<!-- 历史记录组件 -->
<script setup lang="ts" name="historyIndex">
import { onMounted } from 'vue'
import useHistoryIndex from '@/components/index/history/hooks/historyIndex'
const { HistoryCard, HistoryLogs, historyLogsData, logsClicked } = useHistoryIndex()
import Null from '@/components/resultNull.vue'
onMounted(() => {
  const item = historyLogsData.value[0]
  logsClicked(item.time)
})
</script>
<template>
  <div id="history">
    <div class="left">
      <component :is="historyLogsData[0].data.length !== 0 ? HistoryCard : Null"></component>
    </div>
    <div class="right">
      <component :is="HistoryLogs"></component>
    </div>
  </div>
</template>

<style scoped>
#history {
  margin: 6px;

  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 6px;
  width: 100%;
  min-height: 600px;
  border-radius: var(--radius);
}

.right {
  overflow-y: scroll;
}
</style>
